<template>
  <el-button color="#626aef" @click="addRlet">添加角色</el-button>
  <el-table :data="tableData" style="width: 100%">
    <!-- 角色 -->
    <el-table-column prop="name" label="角色" width="180" />
    <el-table-column prop="state" label="启动" width="180">
      <template #default="scope">
        <el-switch v-model="scope.row.state" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
        {{ scope.row.state ? '禁用' : '启用' }}
      </template>

    </el-table-column>
    <!-- 描述 -->
    <el-table-column prop="description" label="描述" />
    <!-- 操作 -->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="editjuese(scope.row.id)">编辑</el-button>
        <el-button link type="primary" size="small" @click="deletejuese(scope.row.id)">删除</el-button>
        <el-button link type="primary" size="small" @click="fenpei(scope.row.id)">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <div class="demonstration">总条数</div>
    <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[1, 3, 5, 7,20]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>

  <!-- 弹框 -->
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <!-- 启用 -->
      <el-form-item label="启用" :label-width="formLabelWidth">
        <el-switch v-model="form.state" />
      </el-form-item>
      <!-- 角色描述 -->
      <el-form-item label="角色描述" :label-width="formLabelWidth">
        <!-- 文本框 -->
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="OKButton">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { getjuese, deljuese, addjuese, addjur, editjueseid, getuser } from "@/ulist/url";
const tableData = ref([])
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const page = ref(1)
const total = ref(0)
const pageSize = ref(5)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getjuese1()
}
const handleCurrentChange = (val: number) => {
  page.value = val
  getjuese1()
}
const form = reactive({
  id: '',
  name: '',
  state: '',
  description: '',
})

// 获取数据
const getjuese1 = async () => {
  try {
    const res = await getuser(page.value, pageSize.value);
    
    console.log(res);
    if (res.data.code === 10000) {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total
    }
  } catch (error) {
    console.log(error);
  }
}
// 点击弹框
const addRlet = () => {
  dialogFormVisible.value = true

}
const editjuese = async (id: string) => {
  try {
    const res = await editjueseid(id)
    console.log(res);
    form.id = res.data.data.id
    form.name = res.data.data.name
    form.state = res.data.data.state
    form.description = res.data.data.description
    dialogFormVisible.value = true
  } catch (error) {
    console.log(error);
  }
}

const OKButton = async () => {
  try {
    const res = await addjuese({
      name: form.name,
      state: form.state,
      description: form.description
    })
    console.log(res);
    dialogFormVisible.value = false
  } catch (error) {
    //  这里是添加失败
    console.log(error, "添加失败")

  }
  getjuese1()
}
// 删除
const deletejuese = async (id: string) => {
  try {
    const res = await deljuese(id)
    console.log(res);

    if (res.data.code === 10000) {
      tableData.value = res.data.data.rows
    }
  } catch (error) {
    console.log(error)
  }
  getjuese1()
}
// 分配权限
const fenpei = async (id: string) => {
  try {
    const res = await addjur(id, { menus: [] })
    console.log(res);
  } catch (error) {
    console.log(error);
  }
}


onMounted(() => {
  getjuese1()
})







</script>

<style scoped></style>
